import React, { useState } from 'react';
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu, theme, } from 'antd';
import { useLocation, useNavigate } from 'react-router-dom';


type MenuItem = Required<MenuProps>['items'][number];

// function getItem(
//   label: React.ReactNode,
//   key: React.Key,
//   icon?: React.ReactNode,
//   children?: MenuItem[],
// ): MenuItem {
//   return {
//     key,
//     icon,
//     children,
//     label,
//   } as MenuItem;
// }

// const items: MenuItem[] = [
//   getItem('Option 1', 'page1', <PieChartOutlined />),
//   getItem('Option 2', 'page2', <DesktopOutlined />),
//   getItem('User', 'sub1', <UserOutlined />, [
//     getItem('Tom', '3'),
//     getItem('Bill', '4'),
//     getItem('Alex', '5'),
//   ]),
//   getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),
//   getItem('Files', '9', <FileOutlined />),
// ];

const items: MenuItem[] = [
  {
    label: '页面1',
    key: 'page1',
    icon: <PieChartOutlined />,
  },
  {
    label: '页面2',
    key: 'page2',
    icon: <DesktopOutlined />,
  },
  {
    label: '页面3',
    key: 'page3',
    icon: <UserOutlined />,
    children: [
      {
        label: '页面1',
        key: 'page3/page4',
        icon: <PieChartOutlined />,
      },
      {
        label: '页面2',
        key: 'page3/page5',
        icon: <DesktopOutlined />,
      },
    ]
  },
]

const CommonMenu: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigateTo = useNavigate()
  const curRoute = useLocation()
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const menuClick = (e: { key: string }) => {
    navigateTo(e.key)
    console.log(curRoute)
    // console.log(curRoute.pathname.slice(6))
  }

  return (
    // defaultSelectedKeys :当前激活样式所在的key
    <Menu theme="dark" defaultSelectedKeys={[curRoute.pathname.slice(6)]} mode="inline" items={items} onClick={menuClick} />


  );
};

export default CommonMenu;